<template>
	<view class="wocomplete">
		<view class="ag-topbg"></view>
		<view class="wocomplete-card">
			<view class="wocomplete-card__head">
				<view class="ag-womarker">修</view>
				<view class="wocomplete-card__col">
					<view class="wocomplete-card__col-row">
						<text class="wocomplete-card__name">维修工单完工</text>
						<view class="wocomplete-card__no">WO000034193</view>
					</view>
					<view class="wocomplete-card__col-time">
						<text>时间1：2017-3-21 15:19</text>
						<text>时间2：2017-3-21 15:19</text>
					</view>
				</view>
			</view>

			<!-- 维修工单完工 -->
			<view v-if="false" class="wocomplete-card__body">
				<textarea class="wocomplete-card__remark" placeholder="完工备注"></textarea>
				<view class="wocomplete-fix-row">
					<AGInput value="上门维修" @click="onSelect" readonly dropdown placeholder="维修方式" />
					<button class="cu-btn primary">上门维修</button>
				</view>
				<view class="wocomplete-card__content1">
					<!-- 一行两个 -->
					<view class="ag-cellgroup">

						<view class="ag-cell">
							<view class="ag-cell__label">
								<text>编码：</text>
							</view>
							<view class="ag-cell__value">
								<text>020030530042</text>
							</view>
						</view>

						<view class="ag-cell">
							<view class="ag-cell__label">
								<text>产品类型：</text>
							</view>
							<view class="ag-cell__value">
								<text>净水机</text>
							</view>
						</view>

					</view>

					<!-- 一行一个 -->
					<view class="ag-cell">
						<view class="ag-cell__label">
							<text>产品类型：</text>
						</view>
						<view class="ag-cell__value">
							<text>A4，反渗透挂壁式净水机J2305-ROB8，内配3.0G压力桶（白色01-04喷油）</text>
						</view>
					</view>

				</view>
				<AGInput @click="onQrcodeSelect" icon="qrcode" readonly placeholder="物流码" />
				<AGInput @click="onCalenderSelect" icon="calender" readonly placeholder="购机日期" />
			</view>

			<!-- 安装工单完工 -->
			<view v-if="false" class="wocomplete-card__body">
				<textarea class="wocomplete-card__remark" placeholder="完工备注"></textarea>
				<view class="wocomplete-card__content1">
					<!-- 一行两个 -->
					<view class="ag-cellgroup">
						<view class="ag-cell">
							<view class="ag-cell__label">
								<text>编码：</text>
							</view>
							<view class="ag-cell__value">
								<text>020030530042</text>
							</view>
						</view>
						<view class="ag-cell">
							<view class="ag-cell__label">
								<text>产品类型：</text>
							</view>
							<view class="ag-cell__value">
								<text>净水机</text>
							</view>
						</view>
					</view>
					<!-- 一行一个 -->
					<view class="ag-cell">
						<view class="ag-cell__label">
							<text>产品类型：</text>
						</view>
						<view class="ag-cell__value">
							<text>A4，反渗透挂壁式净水机J2305-ROB8，内配3.0G压力桶（白色01-04喷油）</text>
						</view>
					</view>
				</view>
				<AGInput @click="onQrcodeSelect" icon="qrcode" readonly placeholder="物流码" />
				<AGInput @click="onCalenderSelect" icon="calender" readonly placeholder="购机日期" />
				<view class="wocomplete-fix-row">
					<AGInput placeholder="安装位置" />
					<button class="cu-btn primary">厨房</button>
					<button class="cu-btn primary">客厅</button>
				</view>
				<AGInput placeholder="实际收款总金额（保内工单不显示）" />
			</view>

			<!-- 保养换芯工单完工 -->
			<view v-if="false" class="wocomplete-card__body">
				<textarea class="wocomplete-card__remark" placeholder="完工备注"></textarea>
				<view class="wocomplete-card__content1">
					<!-- 一行两个 -->
					<view class="ag-cellgroup">
						<view class="ag-cell">
							<view class="ag-cell__label">
								<text>编码：</text>
							</view>
							<view class="ag-cell__value">
								<text>020030530042</text>
							</view>
						</view>
						<view class="ag-cell">
							<view class="ag-cell__label">
								<text>产品类型：</text>
							</view>
							<view class="ag-cell__value">
								<text>净水机</text>
							</view>
						</view>
					</view>
					<!-- 一行一个 -->
					<view class="ag-cell">
						<view class="ag-cell__label">
							<text>产品类型：</text>
						</view>
						<view class="ag-cell__value">
							<text>A4，反渗透挂壁式净水机J2305-ROB8，内配3.0G压力桶（白色01-04喷油）</text>
						</view>
					</view>
				</view>
				<AGInput @click="onQrcodeSelect" icon="qrcode" readonly placeholder="物流码" />
				<AGInput @click="onCalenderSelect" icon="calender" readonly placeholder="购机日期" />
			</view>

			<!-- 移机工单完工 /  退换机工单完工 -->
			<view v-if="false" class="wocomplete-card__body">
				<textarea class="wocomplete-card__remark" placeholder="完工备注"></textarea>
				<view class="wocomplete-addr">
					<view class="wocomplete-addr__label">新安装地址: 辽宁省沈阳市</view>
					<AGInput placeholder="请选择所在区域" readonly dropdown />
				</view>
				<AGInput placeholder="请输入详细地址" />
				<view class="wocomplete-card__content1">
					<!-- 一行两个 -->
					<view class="ag-cellgroup">
						<view class="ag-cell">
							<view class="ag-cell__label">
								<text>编码：</text>
							</view>
							<view class="ag-cell__value">
								<text>020030530042</text>
							</view>
						</view>
						<view class="ag-cell">
							<view class="ag-cell__label">
								<text>产品类型：</text>
							</view>
							<view class="ag-cell__value">
								<text>净水机</text>
							</view>
						</view>
					</view>
					<!-- 一行一个 -->
					<view class="ag-cell">
						<view class="ag-cell__label">
							<text>产品类型：</text>
						</view>
						<view class="ag-cell__value">
							<text>A4，反渗透挂壁式净水机J2305-ROB8，内配3.0G压力桶（白色01-04喷油）</text>
						</view>
					</view>
				</view>
				<AGInput icon="qrcode" readonly placeholder="物流码" />
				<AGInput icon="calender" readonly placeholder="购机日期" />
				<view class="wocomplete-fix-row">
					<AGInput placeholder="安装位置" />
					<button class="cu-btn primary">厨房</button>
					<button class="cu-btn primary">客厅</button>
				</view>
				<AGInput placeholder="实际收款总金额（保内工单不显示）" />
			</view>

		</view>

		<!-- 保养换芯信息 用于保养换芯工单完工 -->
		<view class="core">
			<view class="core-head">
				<text class="core-head__title">保养换芯信息</text>
				<view class="core-head__btn">
					<text>批量扫描换芯</text>
					<image src="../../static/img/icon-qrcode-color.png" />
				</view>
			</view>
			<view class="core-list">
				<view class="core-item">
					<view class="core-item__label">
						前AC
					</view>
					<view class="core-item__value">
						<text>已使用：3</text>
						<text>剩余：3</text>
					</view>
					<switch checked color="#3d85db"></switch>
				</view>
				<view class="core-item">
					<view class="core-item__label">
						前AC
					</view>
					<view class="core-item__value disabled">
						<text>已使用：3</text>
						<text>剩余：3</text>
					</view>
					<switch checked color="#3d85db"></switch>
				</view>
			</view>
			<view class="core-footer">
				<view class="core-footer__head">
					<text>更换配件数量：1</text>
					<text>保外配件费用: 60 元</text>
				</view>
				<AGInput placeholder="实际收款总金额" />
			</view>
		</view>


		<!-- 维修列表 维修工单中使用 -->
		<view class="repair">
			<view class="repair-head">
				<text class="repair-head__title">维修信息</text>
				<image class="repair-head__add" src="../../static/img/icon-add.png" />
			</view>
			<view class="repair-list">
				<view v-for="(item, index) in [1,2,3]" :key="index" class="repair-item">
					<view class="repair-item__head">
						<text class="repair-item__head-title">故障1：加热故障</text>
						<image class="repair-item__head-edit" src="../../static/img/icon-edit.png" />
						<image class="repair-item__head-del" src="../../static/img/icon-close.png" />
					</view>
					<view class="repair-item__body">
						<view class="ag-cell">
							<view class="ag-cell__label">
								<text>故障信息：</text>
							</view>
							<view class="ag-cell__value">
								<text>故障类别 - 故障现象 - 故障部位 - 故障原因 - 解决方法</text>
							</view>
						</view>
						<view class="ag-cell">
							<view class="ag-cell__label">
								<text>故障信息：</text>
							</view>
							<view class="ag-cell__value">
								<text>电气故障 - 加热故障 - 自动复位温控器 - 自动复位温控器
									异常（闭合或断开） - 更换自动复位温控器</text>
							</view>
						</view>
						<view class="ag-cell">
							<view class="ag-cell__label">
								<text>故障件：</text>
							</view>
							<view class="ag-cell__value">
								<text>401501000000</text>
								<view class="ag-status-tag primary">
									<text>保修件: 是</text>
								</view>
								<view class="ag-status-tag primary">
									<text>保内保外: 保内</text>
								</view>
							</view>
						</view>
						<view class="ag-cell">
							<view class="ag-cell__label">
								<text>故障件名称：</text>
							</view>
							<view class="ag-cell__value">
								<text>自动复位温控器86C,KSD201/ECCQC,UL,VDE(/)</text>
							</view>
						</view>
						<view class="ag-cell">
							<view class="ag-cell__label">
								<text>更换件：</text>
							</view>
							<view class="ag-cell__value">
								<text>401501000000</text>
								<view class="ag-status-tag primary">
									<text>￥ 210.00</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="repair-footer">
				<view class="repair-footer__head">
					<text>更换配件数量：1</text>
					<text>保外配件费用: 0 元</text>
				</view>
				<AGInput placeholder="实际收款总金额（保内工单不显示）" />
			</view>
		</view>

		<view class="wocomplete-section">
			<view class="wocomplete-section__head">
				<view>现场图片</view>
				<text>查看全部</text>
			</view>
			<scroll-view :scroll-x="true" class="wocomplete-listimage">
				<view class="wocomplete-listimage__inner">
					<image class="wocomplete-listimage__item" />
					<image class="wocomplete-listimage__item" />
					<image class="wocomplete-listimage__item" />
					<image class="wocomplete-listimage__item" />
				</view>
			</scroll-view>
		</view>
		<view class="wocomplete-section">
			<view class="wocomplete-section__head">
				<view>服务历程</view>
				<text>查看全部</text>
			</view>
			<view class="wocomplete-listprocess">
				<view class="wocomplete-listprocess__item">
					<text class="wocomplete-listprocess__title">工单接单</text>
					<text class="wocomplete-listprocess__time">2017-09-09</text>
					<text class="wocomplete-listprocess__desc">泉州市师傅帮网络科技有限公司</text>
				</view>
				<view class="wocomplete-listprocess__divider"></view>
				<view class="wocomplete-listprocess__item">
					<text class="wocomplete-listprocess__title">工单接单</text>
					<text class="wocomplete-listprocess__time">2017-09-09</text>
					<text class="wocomplete-listprocess__desc">泉州市师傅帮网络科技有限公司</text>
				</view>
				<view class="wocomplete-listprocess__divider"></view>
			</view>
		</view>

		<view class="wocomplete-footer">
			<button class="cu-btn lg primary block plain">取消</button>
			<button class="cu-btn lg primary block">提交</button>
		</view>

		<!-- 返工弹层 -->
		<uni-popup ref="backPopup" height="200px" type="center" :animation="false">
			<view class="mypopup">
				<view class="mypopup__head">
					<image src="../../static/img/icon-backwork.png"></image>
					<text>返工</text>
				</view>
				<view class="mypopup__body">
					<view class="ag-cellgroup">
						<view class="ag-cell">
							<view class="ag-cell__label">
								<image mode="widthFix" src="../../static/img/icon-user.png" />
							</view>
							<view class="ag-cell__value">
								<text>艾先生</text>
							</view>
						</view>
						<view class="ag-cell">
							<view class="ag-cell__label">
								<image mode="widthFix" src="../../static/img/icon-phone.png" />
							</view>
							<view class="ag-cell__value">
								<text class="ag-color-primary">13007578810</text>
								<!-- <text class="ag-color-primary"></text> -->
							</view>
						</view>
					</view>
					<view class="ag-cell">
						<view class="ag-cell__label">
							<image mode="widthFix" src="../../static/img/icon-location.png" />
						</view>
						<view class="ag-cell__value">
							<text>河南省洛阳市嵩县旧县街</text>
						</view>
					</view>
					<view class="ag-divider"></view>
					<AGInput customStyle="margin-top:0px;" readonly dropdown placeholder="请选择滤芯类型" />
					<AGInput textarea placeholder="工单备注" />
					<view class="mypopup__footer">
						<button class="cu-btn lg primary">确定</button>
						<button class="cu-btn lg primary plain">取消</button>
					</view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>
<script>
	import ListProcess from '../../components/ListProcess';
	import ListImage from '../../components/ListImage';
	import AGInput from '../../components/AGInput';
	import uniPopup from '@dcloudio/uni-ui/lib/uni-popup/uni-popup';

	export default {
		components: {
			ListProcess,
			ListImage,
			AGInput,
			uniPopup
		},
		data() {
			return {

			}
		},
		onReady() {
			this.$refs.backPopup.open();
		},
		methods: {
			onQrcodeSelect() {
				console.log('on select');
				uni.scanCode({
					scanType: 'barCode',
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					}
				})
			},
			onCalenderSelect() {

			}
		}
	}
</script>
<style lang="scss">
	@import './index.scss';
</style>
